<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏</title>
		
		<style>
			*{
				font: 16px "微软雅黑";
				/* 丢掉无序列表样式，针对一项列表项标记 */
				list   -style-type: none;
				/* 丢掉无序列表样式，针对三项 ①列表项标记 list-style-type;
				                            ②列表项位置 list-style-position;    
											③列表项图片 list-style-image;	
												
												 */
				list-style: none;
				/* 去掉内外边距 ul li存在 */
				margin: 0;
				padding: 0;
												
			}
			aside{
				width: 255px;
				height: 500px;
				background: #878787;
				/* 盒子模型：外边距 */
				margin: 20px 200px;
			}
			aside ul.ul_sidebar li{
				width: 235px;
				height: 45px;
				text-align: left;
				line-height: 50px;
				/* 挂靠点【固定】 使用相对定位 */
				position: relative;
				top: 20px;
			}
			aside ul.ul_sidebar li:hover{
				background: #ff55ff;
			}
			/* 挂靠点【活动】使用绝对定位，按照父级位置进行定位 */
			aside ul.ul_sidebar div.out{
				width: 500px;
				height: 500px;
				border: 1px solid red;
				/* 绝对定位 */
				position: absolute;
				left: 455px;
				/* 默认：隐藏   搞不定【jQurey】*/
				display: none;
			}
		/* 新增样式 */
		aside ul.ul_sidebar	li span{
			float: right;
			padding-right: 20px;
			padding-top: 15px;
		}
		aside ul.ul_sidebar	li{
			padding-left: 20px;
		}
		</style>
		<script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		 <aside>
			 <ul class="ul_sidebar">
				 <!--弹出框 ，，模式：div+别名-->
				<div class="out"></div>
				 
			 	<li>手机 平板 电话卡<span>></span></li>
			 	<li>电视 盒子<span>></span></li>
			 	<li>路由器 智能硬件<span>></span></li>
			 	<li>移动电源 插线板<span>></span></li>
				<li>耳机 音箱<span>></span></li>
			 	<li>电池 存储卡<span>></span></li>
			 	<li>保护套 后<span>></span></li>
			 	<li>贴膜<span>></span></li>
			 	<li>米兔<span>></span></li>
			 	<li>箱包 其他周边<span>></span></li>
			</ul>
		 </aside> 
		 
		<script>
			/* 左栏实现：1.添加事件li 2.切换效果 3.切换效果 */
			$("aside ul.ul_sidebar li").hover(function(){
				//弹出框  默认  隐藏  --抓弹出框  第一件事  进行显示
				$("aside ul.ul_sidebar div.out").css("display","block")
			},function(){
				$("aside ul.ul_sidebar div.out").css("display","none")
			});
		</script>
	</body>
</html>
<!-- css 悬停效果     效果不能实现    不能切换
     jq  悬停效果事件源     hover      切换效果问题
	 语法：$("选择器").hover(function(){第一件事},function(){第二件事});
 -->